<style>
.charts{
  width: 96%;
  height: 400px;
}
.content{
  background: white;
  padding: 20px 2%;
}
.desc{
  margin: 10px 0px;
  width: 96%;
  font-size: 16px;
  line-height: 25px;
  text-indent: 40px;
}
</style>
<template>
  <div class="content">
      <div :key="key" v-for="(column, key) in data">
        <div :id="key" class="charts"></div>
        <div class="desc" v-for="(val, k) in data[key]['desc']" :key="k">
          {{val}}
        </div>
      </div>
  </div>
</template>

<script>
import util from "@/libs/util";
export default {
  name: "MScore",
  data() {
    return {
      id: null,
      loading: false,
      data:[1,2,3,4,5,6,7,8,9,10,11,12],
      pie:{},
      chertInfo: {
          title: { text: '' },
          tooltip : {
          },
          xAxis : [],
          yAxis : [
              {
                  type : 'value'
              }
          ],
          series : []
      },
      radar: {
          title: {
          text: '基础雷达图'
        },
        tooltip: {},
        radar: {
          indicator: [
            { name: '销售（sales）', max: 10},
            { name: '管理（Administration）', max: 10},
            { name: '信息技术（Information Techology）', max: 10},
          ]
        },
        series: [{
            type: 'radar',
            data : [{
              value : [8,10,6]
            }]
        }]
      }
    };
  },
  methods: {
    drawLine(data,index){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById(index))
        let charts = data;
        // 绘制图表
        myChart.setOption(charts);
    },
    charts(){
      util.ajax.post("/Index/charts", { id: this.id  }).then(response => {
         if(response.code == 200) {
           this.data = response.data;
           for(let index = 0; index < this.data.length; index++) {
            this.chertInfo.radar = response.data[index].radar;
            if(response.data[index].type == 'radar'){
              this.radar.series= response.data[index].series;
              this.radar.radar.indicator = response.data[index].radar.indicator;
              this.radar.title = response.data[index].title;
              this.drawLine(this.radar,index);
            }else if(response.data[index].type == 'pie'){
              this.pie.tooltip = response.data[index].tooltip;
              this.pie.legend = response.data[index].legend;
              this.pie.title = response.data[index].title;
              this.pie.series = response.data[index].series;
              this.pie.color = response.data[index].color;
              this.drawLine(this.pie,index);
            }else{
              this.chertInfo.series = response.data[index].series;
              this.chertInfo.xAxis = response.data[index].xAxis;
              this.chertInfo.title = response.data[index].title;
              this.chertInfo.legend = response.data[index].legend;
              this.drawLine(this.chertInfo,index);
            }
           }
        }else{
          this.$Message.error(response.msg)
        }
      });
    }
  },
  mounted() {
    this.id = this.$route.query.id;
    this.charts();
  }
};
</script>